<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cur {
            width: 300px;
            height: 300px;
            background-image: linear-gradient(to right, red, orange, yellow, blue);
        }

        .cur button {
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div class="app">
        <!-- form表单:action,action属性的作用是，是把表单数据提交到哪里 -->
        <!-- 
            现在老师点击按钮:点击完按钮,网页会跳转到百度,form标签action属性的作用，
            有默认行为
         -->
        <form action="http://www.baidu.com">
            <!-- 
                修饰:prevent->阻止默认事件
                @click.xxxx ->即为修饰符
             -->
            <button @click.prevent="show">点击弹出8888</button>
        </form>



        <div class="cur" @click="show2">
            <!-- 
                stop:修饰符，可以阻止事件的传播
             -->
            <button @click.stop="show2">阻止事件传播</button>
        </div>


            <!-- 
            修饰符:once,修饰只会让事件触发一次！！！
            因为有的项目，需要让元素事件只会触发一次，利用修饰符once
         -->
         <button @click.once="show3">once修饰符</button>

        
             <!-- 
             注意:修饰符可以进行链式语法,谁先谁后无所谓，这种出现情况比较是少
             这些语法都是支持的，只不过项目、工作当中基础没有这种写法！！！！
             @click.stop.prevent.once
             @click.once.prevent.stop
             @click.prevent.stop.once
          -->
          <form action="http://www.baidu.com">
            <!-- 
                修饰:prevent->阻止默认事件
                @click.xxxx ->即为修饰符
             -->
            <button @click.prevent.once="show">点击弹出8888</button>
        </form>
    </div>
</body>

</html>
<script>
    const VM = new Vue({
        el: '.app',
        methods: {
            show(e) {
                //阻止默认事件:这种写法是曾经学习DOM的时候学习过的，阻止默认事件！！！
                // e.preventDefault()
                alert('呵呵哈哈哈')
            },
            show2(e){
                // e.stopPropagation()
                alert('11111111')
            },
            show3(){
                alert('4444444')
            }
        }
    })
</script>